<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tlias 智能学习辅助系统</title>
    <style>
        /* 全局样式 */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        /* 导航栏样式 */
        .navbar {
            background-color: #7d7777;
            /* 灰色背景 */
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* 标题样式 */
        .navbar h1 {
            margin: 0;
            font-size: 24px;
            /* 加大字体 */
            font-weight: bold;
            /* 加粗 */
            font-family: "楷体";
            color: white;
        }

        /* 退出登录链接样式 */
        .navbar a {
            color: white;
            text-decoration: none;
            font-size: 16px;
        }

        .navbar a:hover {
            text-decoration: underline;
        }

        /* 搜索表单样式 */
        form {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: nowrap;
            margin: 20px;
        }

        input[type="text"],
        select {
            margin-right: 10px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            width: 200px;
        }

        button {
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            margin: 0 5px;
        }

        button:hover {
            background-color: #0056b3;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #f4f4f4;
            border-radius: 5px;
            overflow: hidden;
        }

        table th,
        table td {
            padding: 10px;
            text-align: center;
            border: 1px solid #ccc;
        }

        table th {
            background-color: #007bff;
            color: white;
            font-weight: bold;
        }

        table img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }

        /* 页脚样式 */
        footer {
            margin-top: 20px;
            background-color: #ccc;
            color: white;
            text-align: center;
            padding: 10px 0;
        }

        #container {
            width: 80%;
            margin: 0 auto;
        }

        /* 按钮美化 */
        .button-container {
            display: flex;
            gap: 10px;
        }
    </style>


</head>

<body>
    <div id="app">
        <div id="container">
            <!-- 顶部导航栏 -->
            <div class="navbar">
                <h1>tlias 智能学习辅助系统</h1>
                <a href="#">退出登录</a>
            </div>

            <form @submit.prevent="search">
                <label for="name">姓名：</label>
                <input type="text" id="name" v-model="searchParams.name" placeholder="请输入姓名" />

                <label for="gender">性别：</label>
                <select id="gender" v-model="searchParams.gender">
                    <option value="" selected disabled>请选择性别</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>

                <label for="position">职位：</label>
                <select id="position" v-model="searchParams.position">
                    <option value="" selected disabled>请选择职位</option>
                    <option value="班主任">班主任</option>
                    <option value="讲师">讲师</option>
                    <option value="学工主管">学工主管</option>
                    <option value="教研主管">教研主管</option>
                    <option value="咨询师">咨询师</option>
                </select>

                <button type="submit" @click="searchForm">查询</button>
                <button type="reset" @click="resetForm">清空</button>
            </form>

            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>头像</th>
                        <th>职位</th>
                        <th>入职日期</th>
                        <th>最后操作时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(employee, index) in filteredEmployees" :key="index" @mouseenter="highlightRow(index)"
                        @mouseleave="unhighlightRow(index)" :style="rowStyles[index]">
                        <td>{{ employee.name }}</td>
                        <td>{{ employee.gender }}</td>
                        <td><img :src="employee.avatar" :alt="`${employee.name}头像`"></td>
                        <td>{{ employee.position }}</td>
                        <td>{{ employee.hireDate }}</td>
                        <td>{{ employee.lastOperationTime }}</td>
                        <td class="button-container">
                            <button @click="editEmployee(employee)">编辑</button>
                            <button @click="deleteEmployee(employee)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>

            <footer>
                <p>马哥巨离谱影视制作公司</p>
                <p>版权所有Copyright 2025-2026 All Rights Reserved</p>
            </footer>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.13/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>

        // 创建 Vue 应用实例
        const { createApp, ref, computed } = Vue;

        createApp({
            setup() {
                // 定义搜索参数
                const searchParams = ref({
                    name: '',
                    gender: '',
                    position: ''
                });



                // 定义员工数据
                const employees = ref([

                ]);

                // 计算属性，根据搜索参数过滤员工数据
                const searchForm = () => {
                    axios.get('/api/emps/list', {
                        params: {
                            name: searchParams.value.name,
                            gender: searchParams.value.gender,
                            position: searchParams.value.position
                        }
                    }).then(res => {
                        employees.value = res.data.data;
                    }).catch(error => {
                        console.error("请求失败: ", error);
                    });
                }
                // const searchForm = () => {
                //     axios.get(`https://web-server.itheima.net/emps/list?name=${searchParams.value.name}&gender=${searchParams.value.gender}&position=${searchParams.value.position}`).then(res => {
                //         employees.value = res.data.data;
                //     }).catch(error => {
                //         console.error("请求失败: ", error);
                //     });
                // }

                // const filteredEmployees = computed(() => {
                //     return employees.value.filter(employee => {
                //         return (!searchParams.value.name || employee.name.includes(searchParams.value.name)) &&
                //                (!searchParams.value.gender || employee.gender === searchParams.value.gender) &&
                //                (!searchParams.value.position || employee.position === searchParams.value.position);
                //     });
                // });

                // 定义行样式数组
                const rowStyles = ref([]);

                // 鼠标进入行时改变背景色
                const highlightRow = (index) => {
                    rowStyles.value[index] = { backgroundColor: '#f2ef2e' };
                };

                // 鼠标离开行时恢复背景色
                const unhighlightRow = (index) => {
                    rowStyles.value[index] = { backgroundColor: '#fff' };
                };

                // 查询方法
                const search = () => {
                    // 这里可以添加查询逻辑，例如向服务器发送请求
                    console.log('查询参数:', searchParams.value);
                };

                // 重置表单方法
                const resetForm = () => {
                    searchParams.value = { name: '', gender: '', position: '' };
                };

                // 编辑员工方法
                const editEmployee = (employee) => {
                    console.log('编辑员工:', employee);
                };

                // 删除员工方法
                const deleteEmployee = (employee) => {
                    console.log('删除员工:', employee);
                };

                return {
                    searchParams,
                    employees,
                    rowStyles,
                    searchForm,
                    highlightRow,
                    unhighlightRow,
                    search,
                    resetForm,
                    editEmployee,
                    deleteEmployee
                };
            }
        }).mount('#app');

    </script>
</body>

</html>